
document.addEventListener('DOMContentLoaded', function () {
// 获取所有 .section-header 和 .section-list 元素
const sectionHeaders = document.querySelectorAll('.section-header');
const sectionLists = document.querySelectorAll('.section-list');

// 初始化时显示第一个 section-list 并设置其对应的 .section-header 为激活状态
if (sectionLists.length > 0) {
    const firstListId = sectionHeaders[0].getAttribute('data-list-id');
    const firstListElement = document.getElementById(firstListId);

    if (firstListElement) {
        firstListElement.classList.add('active');
        sectionHeaders[0].classList.add('active');
    }
}

// 遍历所有 .section-header 并添加鼠标悬停事件监听器
sectionHeaders.forEach(function (header) {
    header.addEventListener('mouseover', function () {
        // 获取当前悬停的 header 对应的 list-id
        const listId = header.getAttribute('data-list-id');
        const listElement = document.getElementById(listId);

        if (listElement) {
            // 隐藏所有 section-list
            sectionLists.forEach(function (list) {
                list.classList.remove('active');
            });

            // 显示对应的 section-list
            listElement.classList.add('active');

            // 移除所有 .section-header 的 active 类
            sectionHeaders.forEach(function (otherHeader) {
                otherHeader.classList.remove('active');
            });

            // 添加 active 类到当前悬停的 .section-header
            header.classList.add('active');
        }
    });

    header.addEventListener('mouseout', function () {
        // 不移除 active 类，保持蓝色背景色
        // 但是需要检查是否有已经激活的 section-list，如果没有则全部隐藏
        const activeList = document.querySelector('.section-list.active');
        if (!activeList) {
            sectionLists.forEach(function (list) {
                list.style.display = 'none';
            });
        }
    });

    header.addEventListener('mouseout', function () {
        // 不移除 active 类，保持蓝色背景色
        // 但是需要检查是否有已经激活的 section-list，如果没有则全部隐藏
        const activeList = document.querySelector('.section-list.active');
        if (!activeList) {
            sectionLists.forEach(function (list) {
                list.style.display = 'none';
            });
        }
    });
});
    // 选择返回顶部按钮的元素
    var scrollToTopBtn = $('#scroll-to-top');

    // 当用户滚动页面时触发
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) { // 当滚动超过200像素时显示按钮
            scrollToTopBtn.fadeIn();
        } else {
            scrollToTopBtn.fadeOut();
        }
    });

    // 点击按钮时平滑滚动到顶部
    scrollToTopBtn.click(function(event) {
        event.preventDefault(); // 阻止默认行为
        $('html, body').animate({
            scrollTop: 0 // 滚动到顶部
        }, 500); // 动画持续时间（毫秒）
    });
    const menuItems = document.querySelectorAll('.menu-item');

    menuItems.forEach(function (menuItem) {
        menuItem.addEventListener('mouseover', function () {
            // 显示对应的下拉菜单
            const dropdownMenu = this.querySelector('.dropdown-menu');
            if (dropdownMenu) {
                dropdownMenu.style.display = 'block';
            }
        });

        menuItem.addEventListener('mouseout', function () {
            // 隐藏对应的下拉菜单
            const dropdownMenu = this.querySelector('.dropdown-menu');
            if (dropdownMenu) {
                dropdownMenu.style.display = 'none';
            }
        });
    });
});